<template>
  <div class="zhifu-detail-footer-container">
    <div class="main" :style="{ paddingBottom: `${bottomDistance}px` }">
      <div class="fooster-btn-left">对订单有疑问?</div>
      <div class="fooster-btn-right">
        <nut-button
          size="small"
          color="linear-gradient(to right, #ff6034, #ee0a24)"
          @click="gotoService"
        >
          <template #icon>
            <IconFont name="service"></IconFont>
          </template>
          联系客服
        </nut-button>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted } from "vue";
import Taro from "@tarojs/taro";
import { useTabbarStore } from "../../store";
import { storeToRefs } from "pinia";
import { IconFont } from "@nutui/icons-vue-taro";

const tabbarStore = useTabbarStore();
const { bottomDistance } = storeToRefs(tabbarStore);
onMounted(() => {
  setBottomDistance();
});
const setBottomDistance = () => {
  const systemInfo = Taro.getSystemInfoSync();
  const safeArea: any = systemInfo.safeArea;
  const res = systemInfo.screenHeight - safeArea.bottom;
  console.log(res, safeArea, systemInfo);

  tabbarStore.setBottomDistance(res);
};
const gotoService = () => {
  Taro.navigateTo({
    url: "/pages/kf-service/index",
  });
};
</script>
<style lang="scss">
.zhifu-detail-footer-container {
  display: flex;
  flex-direction: column;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  .main {
    height: 120px;
    background-color: #fff;
    padding: 0 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .fooster-btn-left {
      font-size: 26px;
    }
    .fooster-btn-right {
      .nut-button--default {
        border: none !important;
      }
    }
  }
}
</style>
